<!--
 * @Author: chunlai
 * @Date: 2025-07-18 12:09:47
 * @LastEditTime: 2025-08-15 15:34:31
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \0.newInsure\src\views\form\components\TargetsModal.vue
 * @Description: 标体(房屋-建筑)模块
-->
<template>
  <div class="newModel step-renewal">
    <div class="of_hid">
      <div class="topSec">
        <div>
          <div class="form-head-name">{{ targetsModalName }}</div>
        </div>
      </div>
      <van-field
        label="被保人对房屋的权益"
        label-width="130px"
        :input-align="inputAlign"
        class="refhousesEquity"
        @click="
          showPopAction(
            'picker',
            'housesEquity',
            housesEquityList,
            targetForm.housesEquity
          )
        "
        @focus="tipsInfo.housesEquity = ''"
        readonly
        placeholder="请选择"
        :error="tipsInfo.housesEquity !== ''"
        v-if="infoReg.hasOwnProperty('housesEquity')"
      >
        <div slot="input">
          {{ getKeyName("housesEquity") }}
        </div>
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="housesEquityList.length > 1"
        ></span>
      </van-field>
      <van-field
        label="所在城市"
        :input-align="inputAlign"
        class="refhouseAreaName"
        @click="showPopAction('address', 'houseAreaName', [])"
        :value="targetForm.houseAreaName"
        type="textarea"
        rows="1"
        autosize
        readonly
        placeholder="请选择"
        @focus="tipsInfo.houseAreaName = ''"
        :error="tipsInfo.houseAreaName !== ''"
        v-if="infoReg.hasOwnProperty('houseAreaName')"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <van-field
        :input-align="inputAlign"
        class="refpermanentAddress"
        v-if="infoReg.hasOwnProperty('permanentAddress')"
        v-model="targetForm.permanentAddress"
        label="详细地址"
        type="textarea"
        rows="1"
        maxlength="30"
        autosize
        clearable
        placeholder="请输入"
        @input="tipsInfo.permanentAddress = ''"
        @focus="tipsInfo.permanentAddress = ''"
        :error="tipsInfo.permanentAddress !== ''"
      />
      <van-field
        class="refhouseTime"
        :input-align="inputAlign"
        label="房屋建造年份"
        v-model="targetForm.houseTime"
        type="number"
        maxlength="4"
        placeholder="例：1995"
        @focus="tipsInfo.houseTime = ''"
        :error="tipsInfo.houseTime !== ''"
        v-if="infoReg.hasOwnProperty('houseTime')"
      >
        <template #button>
          <span class="field_unit">年</span>
        </template>
      </van-field>
      <van-field
        class="refhouseArea"
        :input-align="inputAlign"
        label="房屋面积"
        v-model="targetForm.houseArea"
        type="number"
        placeholder="请输入整数，不大于2000"
        @focus="tipsInfo.houseArea = ''"
        :error="tipsInfo.houseArea !== ''"
        v-if="infoReg.hasOwnProperty('houseArea')"
      >
        <template #button>
          <span class="field_unit">平方米</span>
        </template>
      </van-field>
    </div>
    <van-popup v-model="showPop" round position="bottom">
      <van-picker
        v-if="popConfig.type == 'picker'"
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirmPick"
        @cancel="showPop = false"
        :default-index="defaultIndex"
      >
        <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
      <Address
        v-else-if="popConfig.type == 'address'"
        :filterCode="filterCode"
        @cancle="showPop = false"
        @addresssConfirm="addresssConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { popupMixin } from "@/mixins/popup";
// import { validXuBaoInfo } from "@/translate/validate/xubao";
export default {
  name: "TargetsModal",
  components: {},
  data() {
    return {
      inputAlign: "right",
      pageLoad: false,
      targetForm: {
        housesEquity: "",
        houseAreaName: "",
        province: "",
        city: "",
        county: "",
        permanentAddress: "",
        houseTime: "",
        houseArea: "",
      },
      tipsInfo: {
        housesEquity: "",
        houseAreaName: "",
        permanentAddress: "",
        houseTime: "",
        houseArea: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      infoReg: "infoReg/targetApiReg",
      targetsModalName: "page/targetsModalName",
      // renewalInfo: "insert/renewalInfo",
      housesEquityList: "dictionary/housesEquityList",
    }),
  },
  watch: {
    targetForm: {
      handler: function (val) {
        if (this.pageLoad) {
          // this.$store.commit("insert/UPDATE_RENEWAL_INFO", val);
        }
      },
      deep: true,
    },
  },
  mixins: [popupMixin],
  created() {
    // const xbItem = this.renewalInfo;
    // Object.keys(this.targetForm).map((key) => {
    //   if (xbItem.hasOwnProperty(key)) {
    //     this.targetForm[key] = xbItem[key];
    //   }
    // });
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  mounted() {},
  methods: {
    getKeyName(key = "") {
      let res = "";
      if (this.targetForm[`${key}`]) {
        const obj = this[`${key}List`].find(
          (e) => this.targetForm[`${key}`] == e.keyId
        );
        if (obj) {
          res = obj.text;
        }
      }
      return res;
    },
    saveForm() {
      // 校验+提交
      const iptCfg = JSON.parse(JSON.stringify(this.infoReg));
      let res = validXuBaoInfo(iptCfg, this.targetForm);
      // console.log("res", res);
      if (!res.status) {
        let target = document.querySelector(`.ref${res.target}`);
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        // this.$toast(res.msg);
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `续保规则校验`,
          desc: `${res.msg}`,
        });
      }
      return res;
    },
    changeRadio(type, item) {
      let obj = {};
      obj[type] = item.keyId || item.value;
      this.changeData(obj);
      if (type === "renewFlag") {
        if (item.value == "-1") {
          if (this.autoRenewalFile.label) {
            this.showFilePop();
          }
        }
      }
    },
    showFilePop() {
      this.$nextTick(() => {
        this.$refs.htmlRef.initModal(this.autoRenewalFile);
      });
    },
    sameToAppnt(event, type) {
      if (event) event.preventDefault();
      if (type == "firBankMobile") {
        this.changeData({
          firBankMobile: !this.phoneSameWithAppnt ? this.applicant.phone : "",
        });
      }
    },
    changeData(data) {
      Object.assign(this.targetForm, data);
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.xubao-desc {
  font-size: 12px;
  line-height: 26px;
  padding: 5px 16px 10px;
  color: #909399;
  background: #f4f4f5;
  &.active {
    color: #e7a249;
    background: linear-gradient(270deg, #ffefe4, #fff7e4);
  }
  span {
    font-style: normal;
    color: #409eff;
  }
  p {
    display: flex;
    align-items: center;
    line-height: 22px;
  }
}
</style>
